<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>signpage</title>
    <link rel="stylesheet" href="__PUBLIC__/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layui.all.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.zoom.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mui/mui.previewimage.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue-resource.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .layui-form-label {
        width:auto!important;
    }
    .move{
        transform: translateX(20%);
    }
    .layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
    }

    .mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
            .aclass{
                width:350px;
                margin:10px ;
            }
</style>
<body>
    <div id='app1' class='aclass'>
        <form class="layui-form "  action="" ENCTYPE="multipart/form-data" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">MEMO</label>
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                      </div>
                </div>
                
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">UPLOAD</label>
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-left: 10px;" name='image' id="testList">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button> 
                </div>
                <div class="layui-inline">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" data-preview-src="" data-preview-group="1" id="demo1" />
                        <p id="demoText"></p>
                      </div>
                </div>
            </div>
           
        </form>
    </div>
</body>
<script>
   mui.previewImage();
   layui.use(['upload','layer'], function () {
        let upload = layui.upload;
        upload.render({
            elem: '#testList'
            , url: '{:url("Equipment/upload")}'+'?id='+parent.id+'&sname='+parent.p+'&step='+parent.step 
            , accept: 'file'
            // , multiple: true //是否允许多文件上传
            , auto: true //是否允许自动上传，否需要配置bindaction参数指定上传按钮来触发上传
            // , bindAction: '#testListAction' //上传按钮 触发
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
				//console.log(obj);
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
				
            },
            choose: function (obj) {   //选择文件后的回调 
                console.log(obj)
            }
            , done: function (res, index, upload) {
                let lay = layui.layer;
                if(res.code==0){
                    lay.msg('图片上传成功！',{time:1500,icon:6})
                }
            }
            , error: function (index, upload) {  //执行上传后的回调

            }
        });
    })
</script>
</html>